<script setup>
    const articleList = [
        {id:"01",content:'四川省交通建设集团有限责任公司智能化科扬招标采购的公示', date: '2022-04-13',status:"未报名",operation:"报名"},
        {id:"02",content:'校工会交互智能平板采购竞价成交公告', date: '2022-04-13',status:"未报名",operation:"报名"},
        {id:"03",content:'平邑县图书馆馆藏图书及智能化设备采购项目中标结果公示', date: '2022-04-13',status:"未报名",operation:"报名"},
        {id:"04",content:'三一智能电机-局部放电设备-招标招标公告-ZB202304130003\\n\\n项目名称', date: '2022-04-13',status:"未报名",operation:"报名"},
        {id:"05",content:'中电鸿信信息科技有限公司2023年警务室智能化改造项目单一来源采购方案公示', date: '2022-04-13',status:"未报名",operation:"报名"},
        {id:"06",content:'海头镇宅基村土地发包项目', date: '2022-04-13',status:"未报名",operation:"报名"},
        {id:"07",content:'先锋创业大楼（515-1室）60㎡', date: '2022-04-13',status:"未报名",operation:"报名"},
        {id:"08",content:'万达开绿色智能铸造产业园项目（二期）比选结果公告', date: '2022-04-13',status:"未报名",operation:"报名"},
        {id:"09",content:'2023年度工伤基金结算支付智能审核监控项目竞争性磋商公告', date: '2022-04-13',status:"未报名",operation:"报名"},
        {id:"10",content:'万达开绿色智能铸造产业园项目（三期）比选结果公告', date: '2022-04-13',status:"未报名",operation:"报名"},
        {id:"11",content:'太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目', date: '2022-04-13',status:"未报名",operation:"报名"},
        {id:"12",content:'侯马市第二中学校2023年4月至11月政府采购意向-城乡义务教育补助经费中央资金', date: '2022-04-13',status:"未报名",operation:"报名"},
        {id:"13",content:'【次氯酸钠贮存罐修理】采购公告附件', date: '2022-04-13',status:"未报名",operation:"报名"},
    ];
</script>

<template>                   
     <el-container style="width: 1200px;margin: auto;background-color: #f8f9f8;padding: 30px;">
        <el-main>
            <p style="font-size: 15px;color: #959292;margin-bottom: 30px;">
                <router-link to="/" style="color: #959292;">首页</router-link> /
                <router-link to="/Profile" style="color: #959292;">个人中心</router-link> /
                <span style="color: black;">参与投标</span>
            </p>

            <el-row>
                <el-col :span="4" style="background-color: #00b99e;color: #fff;font-size: 18px;padding: 20px 0;border-radius: 20px;">
                    <router-link to="/EnterpriseInfo" style="color: #fff;">
                        <div class="nav" style="width: 80%;margin: auto;display: flex;align-items: center;gap: 5px;">
                            <img src="/images/个人中心/u673.svg" style="margin-top: 10px;"> 企业信息
                        </div>
                    </router-link>
                    <router-link to="/Bid" style="color: #fff;">
                        <div class="nav" style="width: 80%;margin: auto;display: flex;align-items: center;gap: 5px;background-color: #fff;color: #00b99e;border-radius: 20px;">
                            <img src="/images/个人中心/u674.svg" style="margin-top: 10px;filter: brightness(0) saturate(100%) invert(58%) sepia(26%) saturate(1531%) hue-rotate(123deg) brightness(91%) contrast(88%);"> 参与投标
                        </div>
                    </router-link>
                    <router-link to="/MyBid" style="color: #fff;">
                        <div class="nav" style="width: 80%;margin: auto;display: flex;align-items: center;gap: 5px;">
                            <img src="/images/个人中心/u675.svg" style="margin-top: 10px;"> 我的投标
                        </div>
                    </router-link>
                </el-col>
                <el-col :span="19" style="background-color: #fff;font-size: 14px;padding: 40px;border-radius: 20px;margin-left: 30px;">
                    <!-- 列表 -->
                    <el-row style="padding:15px 15px 15px 30px;border-bottom: 1px solid #ccc;background-color: #f6fcfc;font-weight: bold;">
                        <el-col :span="2">序号</el-col>
                        <el-col :span="14">标的发布名称</el-col>
                        <el-col :span="4">投标结束时间</el-col>
                        <el-col :span="2">状态</el-col>
                        <el-col :span="2">操作</el-col>
                    </el-row>
                    <el-skeleton :rows="4" animated :loading="!articleList.length">
                        <div v-for="item in articleList">
                            <el-row style="padding:10px 15px 10px 30px;border-bottom: 1px solid #ccc;">
                                <el-col :span="2">{{item.id}}</el-col>
                                <el-col :span="14">{{ item.content }}</el-col>
                                <el-col :span="4">{{item.date}}</el-col>
                                <el-col :span="2">{{item.status}}</el-col>
                                <el-col :span="2">
                                    <router-link to="" style="color: #00b99e;">{{ item.operation }}</router-link>
                                </el-col>
                            </el-row>
                        </div>
                    </el-skeleton>
                </el-col>
            </el-row>
            
        </el-main>
    </el-container>
</template>

<style scoped>  
/* 一、全局样式 */
    * {
        margin: 0;
        padding: 0;
    }
    /* 修改a标签样式 */
    a{
        text-decoration: none;
    }

/* 二、导航栏样式 */
    .nav:hover{
        background-color: #fff;
        color: #00b99e;
        border-radius: 20px;
    }
    .nav:hover img{
        filter: brightness(0) saturate(100%) invert(58%) sepia(26%) saturate(1531%) hue-rotate(123deg) brightness(91%) contrast(88%);/* 将图片颜色绿色(#00b99e) */
    }

</style>